<template>
  <a
    href="javascript:;"
    :class="`icon order ${order}`"
    :title="string"
    @mouseup="change"
  ></a>
  <div class="tip" v-show="flag">{{ string }}</div>
</template>

<script>
import { toRef, watch, ref } from "vue";
import { useStore } from "vuex";
export default {
  name: "SongPlayOrder",
  setup() {
    const store = useStore();
    const play = toRef(store.state.PlaySong, "PlayTheOrder");
    let order = ref(null);
    let string = ref(null);
    let flag = ref(false);
    let time = null;
    function changeOrder(value) {
      store.commit("PlaySong/changePlayTheOrder", value);
      flag.value = true;
      clearTimeout(time);
      time = null;
      time = setTimeout(() => {
        flag.value = false;
        time = null;
      }, 1500);
    }
    function change() {
      switch (store.state.PlaySong.PlayTheOrder) {
        case "circulation":
          changeOrder("random");
          break;
        case "random":
          changeOrder("singleCirculation");
          break;
        case "singleCirculation":
          changeOrder("circulation");
          break;
        default:
          break;
      }
    }
    watch(
      play,
      (value) => {
        switch (value) {
          case "circulation":
            string.value = "循环";
            order.value = "icon-circulation";
            break;
          case "random":
            string.value = "随机";
            order.value = "icon-random";
            break;
          case "singleCirculation":
            string.value = "单曲循环";
            order.value = "icon-single-circulation";
            break;
          default:
            break;
        }
      },
      {
        immediate: true,
      }
    );
    return {
      change,
      order,
      string,
      flag,
    };
  },
};
</script>

<style scoped lang="less">
.order {
  background-image: url("../../../../common/images/playbar.png");
  background-repeat: no-repeat;
}
.icon-random {
  background-position: -66px -248px;
  &:hover {
    background-position: -93px -248px;
  }
}
.icon-single-circulation {
  background-position: -66px -344px;
  &:hover {
    background-position: -93px -344px;
  }
}
.icon-circulation {
  background-position: -3px -344px;
  &:hover {
    background-position: -33px -344px;
  }
}
.tip {
  position: absolute;
  top: -35px;
  left: 12px;
  width: 81px;
  height: 39px;
  text-align: center;
  line-height: 34px;
  color: #fff;
  background: url("../../../../common/images/playbar.png") no-repeat 0 -457px;
}
</style>
